<template>
    <orh-trees :treesHead="treesHead" reload @on-reload="refresh">
        <DatePicker v-model="daterange" @on-change="daterangeChange" style="width:200px;margin-right: 8px;" type="daterange" placeholder="请选择时间段" slot="option"></DatePicker>
        <Select v-model="section" @on-change="selectSect" multiple style="width:200px;margin-right: 8px;" clearable slot="option">
            <Option value="5">早读</Option>
            <Option value="1">早自习</Option>
            <Option value="2">第一晚自习</Option>
            <Option value="3">第二晚自习</Option>
            <Option value="4">第三晚自习</Option>
            <Option value="6">资源值班</Option>
        </Select>
        <Button type="primary" @click="handleSubmit" size="small" slot="option">筛选</Button>
        <Button @click="status = false" size="small" style="margin-left: 15px;witch:150px" slot="option" type="primary">查看列表</Button>
        <Button @click="status = true" size="small" style="margin-left: 15px;witch:150px" slot="option" type="primary">查看图表</Button>    
        <Tree :data="trees" slot="trees" @on-select-change="itemChange"></Tree>
        <orh-sub-table pages :pageDate="pageDate" @on-page-change="queryData" slot="content">    
            <div slot="table">
                <div v-if="!status">
                    <Table :columns="columns" :data="data" :loading="tableload"></Table>
                </div>
                <div v-if="status">
                    <Col span="24" v-for="(item,index) in echartData" :key="index">
                    <echarts :option="item" style="width:100%;height:400px;"></echarts>
                    </Col>
                    <Spin fix v-if="tableload"></Spin>
                </div>
            </div>
        </orh-sub-table>
    </orh-trees>
</template>
                
<script>
    export default {
        components: {},
        data() {
            return {
                show: false,
                tableload: false,
                status: false,
                condition: null,
                echartData: [],
                daterange: null,
                section: [],
                pageDate: {
                    total: 0,
                    current_page: 1,
                    per_page: 0
                },
                treesHead: {
                    title: '选择值班项',
                    button: false,
                    button_text: '添加按钮'
                },
                data: [],
                trees: [],
                columns: [],
                url: 'api/watchlist/v1/admininspecttermcheck/classbeteachergrade?department_id=',
                gradesUrl: 'api/watchlist/v1/get/departmentstest/test',
    
            }
        },
        methods: {
            daterangeChange(date) {
                this.daterange = date
            },
            selectSect(val) {
                this.section = val
            },
            // ==================================================
            // 时间段
            // ==================================================
            handleSubmit() {
                this.tableload = true
                this.columns = []
                let urls = ''
                if (this.daterange != null && this.section.length > 0) {
                    this.submits(this.url + this.condition + '&an_time=' + this.daterange[0] + '&en_time=' + this.daterange[1] + '&section=' + this.section)
                    return
                }
    
                if (this.daterange == null && this.section.length > 0) {
                    this.submits(this.url + this.condition + '&section=' + this.section)
                    return
                }
    
                if (this.daterange != null && this.section.length == 0) {
                    this.submits(this.url + this.condition + '&an_time=' + this.daterange[0] + '&en_time=' + this.daterange[1])
                    return
                }
    
                if (this.daterange == null && this.section.length == 0) {
                    this.$Message.warning('请选择查询条件');
                    return
                }
            },
            submits(url) {
                this.echartData = []
                this.$http.get(url).then(val => {
                    if (val.code == '200') {
                        if (val.data.length > 0) {
                            this.data = val.data
                            this.columns = [{
                                title: '教师名称',
                                align: 'center',
                                width: 150,
                                key: 'teacher_name'
                            }]
    
                            val.data.forEach(this.bargraphHande)
                            this.dataHandle(val.data[0].watchlist)
                            this.pageDate.total = val.data.length
                            this.pageDate.per_page = val.data.length
                            this.pageDate.current_page = 1
                            this.tableload = false
                        } else {
                            this.data = []
                            this.tableload = false
                        }
                    }
                }, err => console.log(err))
            },
            bargraphHande(item, index) {
                let arr = []
                let data = []
                item.watchlist.forEach(el => {
                    arr.push(el.watchlist_name.zh)
                    data.push(el.cont)
                })
                this.echartData.push({
                    title: {
                        text: item.teacher_name.zh
                    },
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['line', 'bar', ]
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: arr,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '数量',
                        type: 'bar',
                        barWidth: '60%',
                        data: data
                    }]
                })
            },
            // ==================================================
            // 获取年级组
            // ==================================================
            gradesData() {
                this.$http.get(this.gradesUrl).then(val => {
                    if (val.code == '200') {
                        this.trees = []
                        let datas = JSON.parse(JSON.stringify(val.data))
                        datas.forEach(this.gradesHandle)
                    }
                }, err => console.log(err))
            },
    
            // ==================================================
            // 年级组数据处理
            // ==================================================
            gradesHandle(item, index) {
                if (index == 0) {
                    this.trees.push({
                        title: item.department_name.zh,
                        selected: true,
                        value: item.id
                    })
                    this.condition = item.id
                    this.queryData()
                } else {
                    this.trees.push({
                        title: item.department_name.zh,
                        value: item.id,
                    })
                }
            },
    
            // ==================================================
            // 条件查询数据
            // ==================================================
            itemChange(val) {
                if (val.length != 0) {
                    this.data = []
                    this.columns = []
                    this.tableload = true
                    this.condition = val[0].value
                    this.queryData()
                }
            },
    
            // ==================================================
            // 刷新数据
            // ==================================================
            refresh() {
                this.section = []
                this.daterange = null
                this.data = []
                this.columns = []
                this.tableload = true
                this.queryData()
            },
    
            // ==================================================
            // 查询数据
            // ==================================================
            queryData() {
                this.tableload = true
                this.echartData = []
                this.$http.get(this.url + this.condition).then(val => {
                    if (val.code == '200') {
                        if (val.data.length > 0) {
                            this.data = val.data
                            this.columns = [{
                                title: '教师名称',
                                align: 'center',
                                width: 150,
                                render: (h, params) => {
                                    let name = params.row.teacher_name.zh;
                                    return h('div', name)
                                }
                            }, {
                                title: ' '
                            }]
    
                            val.data.forEach(this.bargraphHande)
                            this.dataHandle(val.data[0].watchlist)
                            this.pageDate.total = val.data.length
                            this.pageDate.per_page = val.data.length
                            this.pageDate.current_page = 1
                            this.tableload = false
                        } else {
                            this.data = []
                            this.tableload = false
                        }
                    }
                }, err => console.log(err))
            },
            // ==================================================
            // 查询数据
            // ==================================================
            dataHandle(data) {
                let column = data.map(el => {
                    let obj = {
                        align: 'center',
                        width: 150,
                        paddingLeft: '-18px',
                        value: el.watchlist_id,
                        renderHeader: (h, params) => {
                            return h('div', el.watchlist_name.zh);
                        },
                        render: (h, params) => {
    
                            let subjectScore = params.row.watchlist.find(i => i.watchlist_id === params.column.value)
                            let cont = subjectScore.count ? subjectScore.count : 0
    
                            return h('div', cont);
                        }
                    }
                    return obj
                })
                this.columns = [...this.columns, ...column]
            },
        },
        mounted() {
            this.gradesData()
        },
    };
</script>